import React, { useState } from 'react';
import { Card } from '../../components/common/Card';

interface Task {
  id: string;
  title: string;
  description: string;
  status: 'todo' | 'in-progress' | 'review' | 'done';
  priority: 'low' | 'medium' | 'high';
  dueDate: string;
  assignee: {
    id: string;
    name: string;
    avatar?: string;
  };
  tags: string[];
}

const Tasks: React.FC = () => {
  const [tasks, setTasks] = useState<Task[]>([
    {
      id: '1',
      title: '完成用户注册页面',
      description: '实现用户注册表单和验证逻辑',
      status: 'done',
      priority: 'high',
      dueDate: '2025-03-05',
      assignee: { id: '1', name: '张三' },
      tags: ['前端', 'UI']
    },
    {
      id: '2',
      title: '实现任务拖拽功能',
      description: '添加任务看板的拖拽排序功能',
      status: 'in-progress',
      priority: 'medium',
      dueDate: '2025-03-10',
      assignee: { id: '2', name: '李四' },
      tags: ['前端', '交互']
    },
    {
      id: '3',
      title: '优化数据加载性能',
      description: '减少API请求次数，添加数据缓存',
      status: 'todo',
      priority: 'high',
      dueDate: '2025-03-15',
      assignee: { id: '3', name: '王五' },
      tags: ['性能', '优化']
    },
    {
      id: '4',
      title: '编写单元测试',
      description: '为核心组件添加单元测试',
      status: 'review',
      priority: 'low',
      dueDate: '2025-03-12',
      assignee: { id: '4', name: '赵六' },
      tags: ['测试']
    },
  ]);

  const [filter, setFilter] = useState({
    status: 'all',
    priority: 'all',
    search: ''
  });

  const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
    const { name, value } = e.target;
    setFilter(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const filteredTasks = tasks.filter(task => {
    return (
      (filter.status === 'all' || task.status === filter.status) &&
      (filter.priority === 'all' || task.priority === filter.priority) &&
      (filter.search === '' || 
        task.title.toLowerCase().includes(filter.search.toLowerCase()) ||
        task.description.toLowerCase().includes(filter.search.toLowerCase()))
    );
  });

  const getStatusBadgeColor = (status: Task['status']) => {
    switch (status) {
      case 'todo': return 'bg-gray-200 text-gray-800';
      case 'in-progress': return 'bg-blue-200 text-blue-800';
      case 'review': return 'bg-yellow-200 text-yellow-800';
      case 'done': return 'bg-green-200 text-green-800';
      default: return 'bg-gray-200 text-gray-800';
    }
  };

  const getPriorityBadgeColor = (priority: Task['priority']) => {
    switch (priority) {
      case 'low': return 'bg-gray-100 text-gray-800';
      case 'medium': return 'bg-blue-100 text-blue-800';
      case 'high': return 'bg-red-100 text-red-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold">任务</h1>
        <button className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md flex items-center">
          <span className="mr-2">+</span> 新建任务
        </button>
      </div>
      
      <div className="bg-white shadow rounded-lg p-4">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">状态</label>
            <select
              id="status"
              name="status"
              className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
              value={filter.status}
              onChange={handleFilterChange}
            >
              <option value="all">全部状态</option>
              <option value="todo">待处理</option>
              <option value="in-progress">进行中</option>
              <option value="review">审核中</option>
              <option value="done">已完成</option>
            </select>
          </div>
          
          <div>
            <label htmlFor="priority" className="block text-sm font-medium text-gray-700 mb-1">优先级</label>
            <select
              id="priority"
              name="priority"
              className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
              value={filter.priority}
              onChange={handleFilterChange}
            >
              <option value="all">全部优先级</option>
              <option value="low">低</option>
              <option value="medium">中</option>
              <option value="high">高</option>
            </select>
          </div>
          
          <div>
            <label htmlFor="search" className="block text-sm font-medium text-gray-700 mb-1">搜索</label>
            <input
              type="text"
              id="search"
              name="search"
              className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
              placeholder="搜索任务..."
              value={filter.search}
              onChange={handleFilterChange}
            />
          </div>
        </div>
      </div>
      
      <div className="grid grid-cols-1 gap-4">
        {filteredTasks.length > 0 ? (
          filteredTasks.map(task => (
            <Card key={task.id} className="hover:shadow-lg transition-shadow duration-300">
              <div className="flex flex-col md:flex-row md:items-center justify-between">
                <div className="flex-1">
                  <div className="flex items-center mb-2">
                    <h3 className="text-lg font-semibold mr-3">{task.title}</h3>
                    <span className={`text-xs px-2 py-1 rounded-full ${getStatusBadgeColor(task.status)}`}>
                      {task.status === 'todo' && '待处理'}
                      {task.status === 'in-progress' && '进行中'}
                      {task.status === 'review' && '审核中'}
                      {task.status === 'done' && '已完成'}
                    </span>
                  </div>
                  <p className="text-gray-600 mb-3">{task.description}</p>
                  <div className="flex flex-wrap gap-2 mb-3">
                    {task.tags.map((tag, index) => (
                      <span key={index} className="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">
                        {tag}
                      </span>
                    ))}
                  </div>
                </div>
                
                <div className="flex flex-col md:items-end space-y-2 mt-3 md:mt-0">
                  <div className="flex items-center">
                    <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center mr-2">
                      {task.assignee.avatar ? (
                        <img src={task.assignee.avatar} alt={task.assignee.name} className="w-8 h-8 rounded-full" />
                      ) : (
                        <span>{task.assignee.name.charAt(0)}</span>
                      )}
                    </div>
                    <span className="text-sm text-gray-600">{task.assignee.name}</span>
                  </div>
                  <span className={`text-xs px-2 py-1 rounded-full ${getPriorityBadgeColor(task.priority)}`}>
                    {task.priority === 'low' && '低优先级'}
                    {task.priority === 'medium' && '中优先级'}
                    {task.priority === 'high' && '高优先级'}
                  </span>
                  <span className="text-xs text-gray-500">
                    截止日期: {task.dueDate}
                  </span>
                </div>
              </div>
            </Card>
          ))
        ) : (
          <div className="text-center py-10 bg-white rounded-lg shadow">
            <p className="text-gray-500">没有找到匹配的任务</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default Tasks; 